/**
 * @Author: jipeng.Li
 * @Date: 2021-04-22 08:32:41
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-22 08:32:41
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  KeyboardAvoidingView,
  Modal,
  PixelRatio,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  Keyboard,
  Platform,
  NativeModules
} from 'react-native';
import {
  fontColorBlack,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  screenHeight,
  screenWidth,
  splitLineColorLightGray,
} from '../../../../common/styles';
import { Button, msg } from '../../../../common';

const { Submit } = Button;

export default class EditCardNoModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cardNo: '',
      isRightCardNo: true,
      keyboardHeight: '', // 键盘高度
    };
  }

  componentDidMount() {
    if (Platform.OS == 'android') {
      // 监听键盘
      this.keyboardDidShowListener = Keyboard.addListener(
        'keyboardWillShow',
        this._keyboardDidShow,
      );
      this.keyboardDidHideListener = Keyboard.addListener(
        'keyboardWillHide',
        this._keyboardDidHide,
      );
    } else {
      NativeModules.BridgeManager.iOSIQKeyaboard(true);
    }
  }

  componentWillUnmount() {
    if (Platform.OS == 'android') {
      this.keyboardDidShowListener.remove();
      this.keyboardDidHideListener.remove();
    } else {
      NativeModules.BridgeManager.iOSIQKeyaboard(false);
    }
  }

  render() {
    const { isShow = false, driverPhone, changeIsShow = () => {} } = this.props;
    const { isRightCardNo } = this.state;
    return (
      <Modal
        animationType='slide'
        transparent
        visible={isShow}
        onRequestClose={() => {
          changeIsShow(false);
        }}
        onShow={() => {}}
      >
        <TouchableOpacity
          style={styles.mask}
          onPress={() => { changeIsShow(false); }}
        />
        <View style={[styles.infoContainer, { marginBottom: Number(this.state.keyboardHeight) }]}>
          <View style={styles.header}>
            <TouchableOpacity
              style={styles.cancel}
              onPress={() => { changeIsShow(false); }}
            >
              <Text style={styles.cancelText}>取消</Text>
            </TouchableOpacity>
            <Text
              style={{
                fontSize: px2dp(32),
                color: fontColorBlack,
                fontWeight: 'bold',
              }}
            >
              编辑车牌号
            </Text>
            <Submit
              text='确定'
              boxStyle={styles.submitBtn}
              disabled={false}
              onClick={this.submit}
            />
          </View>
          <View style={{ height: px2dp(400) }}>
            <View style={styles.inputWrap}>
              <Text style={styles.inputTitle}>车牌号</Text>
              <View style={styles.textInputContainer}>
                <TextInput
                  style={styles.textInputWrap}
                  placeholder='请输入车牌号'
                  placeholderTextColor='#CDCCC9'
                  multiline
                  maxLength={7}
                  defaultValue=''
                  value={driverPhone}
                  underlineColorAndroid='transparent'
                  onChangeText={text => {
                    this.setState({ cardNo: text });
                  }}
                />
              </View>
            </View>
            {!isRightCardNo && (
              <View style={styles.errText}>
                <Text style={{ color: 'red' }}>车牌号不正确</Text>
              </View>
            )}
          </View>
        </View>
      </Modal>
    );
  }

  _keyboardDidShow = (e) => {
    const { keyboardHeight } = this.state;
    if (keyboardHeight <= 0) {
      this.setState({
        keyboardHeight: e.startCoordinates.height,
      });
    }
  }

  _keyboardDidHide = (e) => {
    this.setState({
      keyboardHeight: 0,
    });
  }

  // 提交
  submit = () => {
    const { determine, changeIsShow } = this.props;
    const { cardNo } = this.state;
    let regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/;
    if (!regExp.test(cardNo)) {
      this.setState({ isRightCardNo: false });
      return msg.emit('app: tip', { text: '车牌号不正确' });
    }
    this.setState({ isRightCardNo: true });
    changeIsShow && changeIsShow(false);
    determine && determine(cardNo);
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
  },
  mask: {
    width: screenWidth,
    height: screenHeight,
    backgroundColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    left: 0,
    top: 0,
  },
  infoContainer: {
    width: screenWidth,
    maxHeight: 0.5 * screenHeight,
    backgroundColor: mainBgColorWhite,
    position: 'absolute',
    bottom: 0,
    left: 0,
    borderRadius: px2dp(12),
    overflow: 'hidden',
    zIndex: 10,
  },
  header: {
    width: screenWidth,
    height: px2dp(108),
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: splitLineColorLightGray,
  },
  cancel: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: 80,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputWrap: {
    marginTop: px2dp(100),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(50)
  },
  textInputContainer: {
    flex: 1,
    height: px2dp(88),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(12),
    paddingHorizontal: px2dp(10)
  },
  textInputWrap: {
    flex: 1,
    // lineHeight: px2dp(88),
    fontSize: px2dp(32),
    backgroundColor: mainBgColorLightGray,
    color: fontColorBlack,
  },
  submitBtn: {
    width: px2dp(104),
    height: px2dp(60),
    borderRadius: px2dp(8),
    position: 'absolute',
    right: px2dp(28),
  },
  cancelText: {
    fontSize: px2dp(32),
    color: fontColorSecDeepGray
  },
  inputTitle: {
    height: px2dp(40),
    width: px2dp(100),
    color: '#343332',
    fontSize: px2dp(28),
  },
  errText: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(150)
  },
});
